<!DOCTYPE html>
<!-- saved from url=(0122)https://ptteng.github.io/WEB/ppt/MENGXIN%E5%A6%82%E4%BD%95%E7%90%86%E8%A7%A3%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B.html#/3/2 -->
<html class=" js no-mobile desktop no-ie chrome chrome63 web-section ppt-section gradient rgba opacity textshadow multiplebgs boxshadow borderimage borderradius cssreflections csstransforms csstransitions no-touch no-retina fontface domloaded w-1366 gt-240 gt-320 gt-480 gt-640 gt-768 gt-800 gt-1024 gt-1280 lt-1440 lt-1680 lt-1920 no-portrait landscape" id="mengxin%e5%a6%82%e4%bd%95%e7%90%86%e8%a7%a3%e7%9b%92%e5%ad%90%e6%a8%a1%e5%9e%8b-page"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>葡萄藤PPT</title>

    <link rel="stylesheet" href="./葡萄藤PPT_files/reveal.css">

    <!-- PPT主题，可以在/css/reveal/theme/中选择其他主题，目前暂时只能使用该模板 -->
    <link rel="stylesheet" href="./葡萄藤PPT_files/ptt.css">

    <!-- syntax highlighting 代码高亮主题 -->
    <link rel="stylesheet" href="./葡萄藤PPT_files/zenburn.css">

    <!-- 打印和PDF输出样式 -->
    <script>
        var link = document.createElement('link');
        link.rel = 'stylesheet';
        link.type = 'text/css';
        link.href = window.location.search.match(/print-pdf/gi) ? '../css/reveal/print/pdf.css' : '../css/reveal/print/paper.css';
        document.getElementsByTagName('head')[0].appendChild(link);
    </script><link rel="stylesheet" type="text/css" href="./葡萄藤PPT_files/paper.css">
    <style>
        .reveal pre code {
            background-color: #120;
        }
    </style><script type="text/javascript" src="./葡萄藤PPT_files/marked.js"></script><script type="text/javascript" src="./葡萄藤PPT_files/markdown.js"></script><script type="text/javascript" src="./葡萄藤PPT_files/notes.js"></script><script type="text/javascript" src="./葡萄藤PPT_files/highlight.js"></script>
</head>
<body>
<img src="./葡萄藤PPT_files/logo.png" alt="" usemap="#pttmap" class="base-logo">
<map name="pttmap">
    <area shape="rect" coords="0,0,276,58" href="http://www.jnshu.com/" alt="" target="_blank">
</map>
<div class="reveal slide center" role="application" data-transition-speed="default" data-background-transition="fade">
    <div class="slides" style="width: 960px; height: 700px; left: 50%; top: 50%; bottom: auto; right: auto; transform: translate(-50%, -50%) scale(0.756);">
        <section class="past" style="top: 215.5px; display: none;" hidden="" aria-hidden="true">
            <h4>小课堂 北京</h4>
            <h4>【CSS-TASK1】如何理解盒子模型？</h4>
            <h4>分享人：黄苏威</h4>
        </section>
        <section class="past" style="top: 3px; display: block;" hidden="" aria-hidden="true">
            <p>目录</p>
            <p>1.背景介绍</p>
            <p>2.知识剖析</p>
            <p>3.常见问题</p>
            <p>4.解决方案</p>
            <p>5.编码实战</p>
            <p>6.扩展思考</p>
            <p>7.参考文献</p>
            <p>8.更多讨论</p>
        </section>
        <section class="stack past" style="top: 0px; display: block;" data-previous-indexv="1" hidden="" aria-hidden="true">
            <section class="past" style="top: 267px; display: block;" hidden="" aria-hidden="true">
                <h3>1.背景介绍</h3>
            </section>
            <section class="" style="top: 244px; display: block;" aria-hidden="true">
                <p>网页是由大小不同的盒子组成的，所有页面中的元素都可以看成一个盒子，并且占据着一定的页面空间。
                </p>
            </section>
            <section class="" style="top: 244px; display: block;" aria-hidden="true">
                <p>早期的盒子模型还分为WC3盒子跟IE盒子，后来没有了。变成了 content-box盒子跟border-box盒子
                </p>
            </section>
        </section>
        <section class="stack present" style="top: 0px; display: block;" data-previous-indexv="1">
            <section class="past" style="top: 267px; display: block;" hidden="" aria-hidden="true">
                <h3>2.知识剖析</h3>
            </section>
            <section class="past" style="top: 264px; display: block;" hidden="" aria-hidden="true">盒子模型是由四部分组成，按照从里往外的顺序，分别为内容区，内边距，边框，外边距。</section>
            <section class="present" style="top: 241px; display: block;">1.内容区：内容区是CSS盒子模型的中心，它呈现了盒子的主要信息内容，这些内容可以是文本、图片等多种类型。内容区是盒子模型必备的组成部分，其他的3部分都是可选的。</section>
            <section class="future" aria-hidden="true" hidden="" style="top: 218px; display: block;">2.内容区有3个属性：width、height和overflow。使用width和height属性可以指定盒子内容区的高度和宽度。 当内容信息太多时，超出内容区所占范围时，可以使用overflow溢出属性来指定处理方法。</section>
            <section class="future" aria-hidden="true" hidden="" style="top: 264px; display: block;">内边距：指的是内容区和边框之间的空间，可以被看做是内容区的背景区域。</section>
            <section class="future" aria-hidden="true" hidden="" style="top: 330px; display: none;">1.CSS padding 属性定义元素的内边距。padding 属性接受长度值或百分比值。</section> 。
            <section class="future" aria-hidden="true" hidden="" style="top: 330px; display: none;">2.单边内边距属性 ： 通过使用下面四个单独的属性，可以分别设置上、右、下、左内边距，各边均可以使用不同的单位或百分比值：
                上内边距padding-top
                    右内边距 padding-right
                    下内边距 padding-bottom
                    左内边距padding-left<p></p>
            </section>
            <section class="future" aria-hidden="true" hidden="" style="top: 330px; display: none;">
              <p> 例如，为h1设置四个内边距
                  h1 {
                  padding-top: 10px;
                  padding-right: 0.25em;
                  padding-bottom: 2px;
                  padding-left: 20%;
                  }</p>
            </section>
            <section class="future" aria-hidden="true" hidden="" style="top: 330px; display: none;"><p>这种写法还可以简写： h1 {padding: 10px 0.25em 2px 20%;}</p><p>两种写法的结果是相同的</p></section>
            <section class="future" aria-hidden="true" hidden="" style="top: 330px; display: none;">简写规则：从上内边距 (top) 开始围着元素顺时针旋转，即按照上、右、下、左的顺序分别设置各边的内边距。各边均可以使用不同的单位或百分比值</section>
            <section class="future" aria-hidden="true" hidden="" style="top: 330px; display: none;">说明：内边距一共有四个，需要用哪个就用哪个。此外，需要多大写多大，单位可选择。</section>
            <section class="future" aria-hidden="true" hidden="" style="top: 330px; display: none;"> 如果元素的各边都有 10 像素的内边距，只需要这样：padding: 10px;</section>
            <section class="future" aria-hidden="true" hidden="" style="top: 330px; display: none;"><p>内边距的百分比数值: 内边距百分数值是相对于其父元素的 width的10% 计算的。如果父元素的 width 改变，它们也会改变。</p>
            <p> 注意：上下内边距与左右内边距一致；即上下内边距的百分数会相对于父元素宽度的10%设置，而不是相对于高度!</p></section>


            <section class="future" aria-hidden="true" hidden="" style="top: 330px; display: none;">
                    例子1：
                    padding:10px 5px 15px 20px;
                    上内边距是 10px
                    右内边距是 5px
                    下内边距是 15px
                    左内边距是 20px
            </section>
            <section class="future" aria-hidden="true" hidden="" style="top: 330px; display: none;">
                    例子2：
                    padding:10px 5px 15px;
                    上内边距是 10px
                    右内边距和左内边距是 5px
                    下内边距是 15px
            </section>
            <section class="future" aria-hidden="true" hidden="" style="top: 330px; display: none;">
                    例子3：
                    padding:10px 5px;
                    上内边距和下内边距是 10px
                    右内边距和左内边距是 5px
            </section>
            <section class="future" aria-hidden="true" hidden="" style="top: 330px; display: none;">
                例子4：
                    padding:10px;
                    所有 4 个内边距都是 10px

            </section>
            <section class="future" aria-hidden="true" hidden="" style="top: 330px; display: none;">
               <p> 例5： padding：3px 5px 5px 3px;
                   上内边距是 3px
                   右内边距是 5px
                   下内边距是 5px
                   左内边距是 3px</p>

               <p>注意：这种情况四边要全部写出来！</p>
            </section>
            <section class="future" aria-hidden="true" hidden="" style="top: 330px; display: none;">
                <p>浏览器支持</p>
                <p>所有浏览器都支持 padding 属性。</p>
            </section>
            <section class="future" aria-hidden="true" hidden="" style="top: 330px; display: none;">边框：边框是围绕元素内容和内边据的一条或多条线。 </section>
            <section class="future" aria-hidden="true" hidden="" style="top: 330px; display: none;">1.CSS border 属性定义元素的边框。每个边框有 3 个方面：样式、宽度、颜色。</section>
            <section class="future" aria-hidden="true" hidden="" style="top: 330px; display: none;">2.边框的样式: 样式是边框最重要的一个方面，如果没有样式，就没有边框。</section>
            <section class="future" aria-hidden="true" hidden="" style="top: 330px; display: none;">定义多种样式 ： 可以为一个边框定义多个样式，例如： p.aside {border-style: solid dotted dashed double;}
                上面这条规则为类名为 aside 的段落定义了四种边框样式：实线上边框、点线右边框、虚线下边框和一个双线左边框。
                我们又看到了这里的值采用了 top-right-bottom-left 的顺序。</section>


            <section class="future" aria-hidden="true" hidden="" style="top: 330px; display: none;">
                  <p>定义单边样式 ：为元素框的某一个边设置边框样式，而不是设置所有 4 个边的边框样式，可以使用下面的单边边框样式属性：
                     border-top-style（上边框样式）
                     border-right-style（右边框样式）
                     border-bottom-style（下边框样式）
                     border-left-style（左边框样式）</p>
                    <p>例如:
                     (1) p {border-style: solid solid solid none;}
                     (2) p {border-style: solid; border-left-style: none;}</p>
               <p>注意：如果要使用第二种方法，必须把单边属性放在简写属性之后。因为如果把单边属性放在 border-style 之前，简写属性的值就会覆盖单边值 none!</p>
            </section>

            <section class="future" aria-hidden="true" hidden="" style="top: 330px; display: none;">2.边框的宽度： border-width 属性为边框指定宽度。 </section>
            <section class="future" aria-hidden="true" hidden="" style="top: 330px; display: none;">为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em；或者使用 3 个关键字之一，它们分别是 thin 、medium（默认值） 和 thick。</section>

            <section class="future" aria-hidden="true" hidden="" style="top: 330px; display: none;">定义多边宽度: 按照 top-right-bottom-left 的顺序设置元素的各边边框：
                p {border-style: solid; border-width: 15px 5px 15px 5px;}
               <p>上面的例子也可以简写为： p {border-style: solid; border-width: 15px 5px;}</p>
                </section>
            <section class="future" aria-hidden="true" hidden="" style="top: 330px; display: none;"><p>定义单边宽度：为元素框的某一个边设置边框宽度，而不是设置所有 4 个边的边框宽度，可以使用下面的单边边框宽度属性。</p>
               <p>border-top-width(上边框宽度)，
                 border-right-width(右边框宽度)，
                 border-bottom-width(下边框宽度)，
                 border-left-width(左边框宽度)</p>
            </section>


            <section class="future" aria-hidden="true" hidden="" style="top: 330px; display: none;">
                    3.没有边框：
                    在前面的例子中，如果希望显示某种边框，就必须设置边框样式，比如 solid 。
                    如果把 border-style 设置为 none 会出现什么情况：
                    p {border-style: none; border-width: 50px;}
                    尽管边框的宽度是 50px，但是边框样式设置为 none。在这种情况下，不仅边框的样式没有了，其宽度也会变成 0。边框消失了，为什么呢？
                    这是因为如果边框样式为 none，即边框根本不存在，那么边框就不可能有宽度，因此边框宽度自动设置为 0，而不论您原先定义的是什么。
                因此，如果希望边框出现，就必须声明一个边框样式。
            </section>
            <section class="future" aria-hidden="true" hidden="" style="top: 330px; display: none;">
                    4.边框的颜色：
                    设置边框颜色非常简单。CSS 使用一个简单的 border-color 属性，它一次可以接受最多 4 个颜色值。
                    可以使用任何类型的颜色值，例如可以是命名颜色，也可以是十六进制和 RGB 值：
                    p {
                    border-style: solid;
                    border-color: blue rgb(25%,35%,45%) #909090 red;
                    }
                    </section>
                    <section class="future" aria-hidden="true" hidden="" style="top: 330px; display: none;">
                  <p>定义单边颜色：
                      还有一些单边边框颜色属性。它们的原理与单边样式和宽度属性相同：
                      border-top-color
                      border-right-color
                      border-bottom-color
                      border-left-color</p>
                   <p>例如，要为 h1 元素指定实线黑色边框，而右边框为实线红色，可以这样指定：
                       h1 {
                       border-style: solid;
                       border-color: black;
                       border-right-color: red;
                       }</p>
                    </section>
                    <section class="future" aria-hidden="true" hidden="" style="top: 330px; display: none;">
                   <p>透明边框：
                       刚才讲过，如果边框没有样式，就没有宽度。不过有些情况下可以创建一个不可见的边框。
                       CSS2 引入了边框颜色值 transparent。这个值用于创建有宽度的不可见边框。请看下面的例子：
                       h1 {
                       border-style: solid;
                       border-width: 5px;
                       border-color: transparent;
                       }</p>

                   <p>从某种意义上说，利用 transparent，使用边框就像是额外的内边距一样；这种透明边框相当于内边距，因为元素的背景会延伸到边框区域（如果有可见背景的话）。
                       重要事项：在 IE7 之前，IE/WIN 没有提供对 transparent 的支持。在以前的版本，IE 会根据元素的 color 值来设置边框颜色。</p>
                    </section>
                    <section class="future" aria-hidden="true" hidden="" style="top: 330px; display: none;"><p>浏览器支持</p><p>所有浏览器都支持 border 属性。</p>
                    </section>


                    <section class="future" aria-hidden="true" hidden="" style="top: 330px; display: none;">
                    外边距：指的是两个盒子之间的距离。</section>
            <section class="future" aria-hidden="true" hidden="" style="top: 330px; display: none;">1.CSS margin 属性定义元素的外边距。 margin 属性接受任何长度单位，可以是像素、英寸或 em。</section>


                    <section class="stack future" aria-hidden="true" hidden="" style="top: 330px; display: none;">
                    <p>例如，为h1设置四个外边距
                        h1 {
                        margin-top: 15px;
                        margin-right: 0.35em;
                        margin-bottom: 10ex;
                        margin-left: 20%;
                        }</p>
                      <p>这种写法可以简写：
                          h1 {margin: 15px 0.35em 10ex 20%;}</p>
                       <section class="future" aria-hidden="true" style="top: 330px; display: none;"><p>简写规则: 与内边距的设置相同，从上外边距 (top) 开始围着元素顺时针旋转，即按照上、右、下、左的顺序分别设置各边的外边距。各边均可以使用不同的单位或百分比值。</p></section>
                    </section>
                    <section class="future" aria-hidden="true" hidden="" style="top: 330px; display: none;">说明：外边距一共有四个，需要用哪个就用哪个。此外，需要多大写多大，单位可选择。</section>
                    <section class="future" aria-hidden="true" hidden="" style="top: 330px; display: none;">
                    另外，还可以为 margin 设置一个百分比数值，与内边距的设置相同。
                    百分数是相对于父元素的 width 的10%计算的。
                    margin 的默认值是 0，所以如果没有为 margin 声明一个值，就不会出现外边距。但是，在实际中，浏览器对许多元素已经提供了预定的样式，外边距也不例外。例如，在支持 CSS 的浏览器中，外边距会在每个段落元素的上面和下面生成“空行”。因此，如果没有为 p 元素声明外边距，浏览器可能会自己应用一个外边距。当然，只要你特别作了声明，就会覆盖默认样式。
                    </section>
                    <section class="future" aria-hidden="true" hidden="" style="top: 330px; display: none;">
                              例子 1：
                              margin:10px 5px 15px 20px;
                              上外边距是 10px
                              右外边距是 5px
                              下外边距是 15px
                              左外边距是 20px
                    </section>
                    <section class="future" aria-hidden="true" hidden="" style="top: 330px; display: none;">
                              例子 2：
                              margin:10px 5px 15px;
                              上外边距是 10px
                              右外边距和左外边距是 5px
                              下外边距是 15px
                    </section>
                    <section class="future" aria-hidden="true" hidden="" style="top: 330px; display: none;">
                              例子 3:
                              margin:10px 5px;
                              上外边距和下外边距是 10px
                              右外边距和左外边距是 5px
                    </section>
                    <section class="future" aria-hidden="true" hidden="" style="top: 330px; display: none;">
                              例子 4:
                              margin:10px;
                              所有 4 个外边距都是 10px
                    </section>
                    <section class="future" aria-hidden="true" hidden="" style="top: 330px; display: none;">
                             <p> 例 5:
                                 margin：3px 5px 5px 3px;
                                 上外边距是 3px
                                 右外边距是 5px
                                 下外边距是 5px
                                 左外边距是 3px
                                 </p>
                        <p>注意：这种情况四边要全部写出来！</p>
                    </section>
                    <section class="future" aria-hidden="true" hidden="" style="top: 330px; display: none;">
                              <p>浏览器支持</p><p>所有浏览器都支持 margin 属性。</p>
                    </section>

        </section>

        <section class="stack future" style="top: 0px; display: block;" data-previous-indexv="0" hidden="" aria-hidden="true">
            <section class="" style="top: 267px; display: block;" aria-hidden="true">
                <h3>3.常见问题</h3>
            </section>
                    <section class="future" aria-hidden="true" hidden="" style="top: 287px; display: block;">外边距合并</section>

                <section class="future" aria-hidden="true" hidden="" style="top: 175px; display: none;">
                <p>   外边距合并：当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。这句话的意思是 margin-top和margin-bottom会发生外边距合并，margin-left和margin-right不会发生外边距合并。</p>
                    </section>
            <section class="future" aria-hidden="true" hidden="" style="top: 330px; display: none;">外边距合并有三种情况</section>

            <section class="future" aria-hidden="true" hidden="" style="top: 330px; display: none;">     <p> 1.当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并 </p>
            </section>

                <section class="future" aria-hidden="true" hidden="" style="top: 330px; display: none;">
                   <p>2.当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开),它们的上和下外边距也会发生合并</p>
                </section>
                <section class="future" aria-hidden="true" hidden="" style="top: 330px; display: none;">
                   <p>3.外边距也可以与自身发生合并，假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并。这种情况比较少见</p>
                    </section>
                    <section class="future" aria-hidden="true" hidden="" style="top: 330px; display: none;">
                   <p> 说明：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并
                       </p>
                    </section>

                    <section class="future" aria-hidden="true" hidden="" style="top: 330px; display: none;">
                   <p>外边距合并具有一定意义。以由几个段落组成的典型文本页面为例，第一个段落上面的空间等于段落的上外边距。如果没有外边距合并，后续所有段落之间的外边距都将是相邻上外边距和下外边距的和，这意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并，段落之间的上外边距和下外边距就合并在一起，这样各处的距离就一致了。
                    </p>
                    </section>

            </section>
        <section class="stack future" style="top: 0px; display: block;" data-previous-indexv="0" hidden="" aria-hidden="true">
            <section class="" style="top: 267px; display: block;" aria-hidden="true">
                <h3>4.解决方案</h3>
            </section>

                    <section class="future" aria-hidden="true" hidden="" style="top: 267px; display: none;"><p> 防止外边距合并的解决方法：</p></section>

                    <section class="future" aria-hidden="true" hidden="" style="top: 267px; display: none;"><p>  1. 用内层元素的margin通过外层元素的padding代替；</p></section>
                  <section class="future" aria-hidden="true" hidden="" style="top: 330px; display: none;"><p>2.设置元素绝对定位 postion:absolute;或float:left;或display:inline-block;</p></section>
        </section>
        <section class="stack future" style="top: 0px; display: none;" data-previous-indexv="0" hidden="" aria-hidden="true">
            <section class="" style="top: 267px; display: none;" aria-hidden="true">
                <h3>5.编码实战</h3>
            </section>
            <section class="future" aria-hidden="true" hidden="" style="top: 287px; display: none;">
                <a href="https://ptteng.github.io/WEB/ppt/MENGXIN%E5%A6%82%E4%BD%95%E7%90%86%E8%A7%A3%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B.html">demo</a>
            </section>
        </section>
        <section class="stack future" style="top: 0px; display: none;" data-previous-indexv="0" hidden="" aria-hidden="true">
            <section class="" style="top: 267px; display: none;" aria-hidden="true">
                <h3>6.扩展思考</h3>
            </section>
            <section class="future" aria-hidden="true" hidden="" style="top: 300px; display: none;">
                <p>
                </p>
            </section>
            	
        </section>
        <section class="stack future" style="top: 0px; display: none;" data-previous-indexv="0" hidden="" aria-hidden="true">
            <section class="" style="top: 267px; display: none;" aria-hidden="true">
                <h3>7.参考文献</h3>
            </section>
            <section class="future" aria-hidden="true" hidden="" style="top: 234px; display: none;">  
            	<p>盒子模型</p>
                <p>框模型</p>
            </section>
        </section>
        <section hidden="" aria-hidden="true" class="stack future" style="top: 0px; display: none;" data-previous-indexv="0">
            <section style="top: 267px; display: none;">
                <h3>8.更多讨论</h3>
            </section>
            <section class="future" aria-hidden="true" style="top: 300px; display: none;">
                <p>
                </p>
            </section>
            
            <section class="future" aria-hidden="true" style="top: 330px; display: none;"><p></p>
            			<p></p>
            			<p></p>
            			<p></p>
            			<p></p>
            			<p></p>
            	</section>
            	<section class="future" aria-hidden="true" style="top: 330px; display: none;"><p></p></section>
            
            
        </section>
        <section hidden="" aria-hidden="true" class="future" style="top: 212.5px; display: none;">
            <h4>鸣谢</h4>
            <p>感谢大家观看</p>
            <p>
                By
                <small style="vertical-align: middle">黄苏威</small>
            </p>
        </section>
    </div>
<div class="backgrounds"><div class="slide-background past" data-loaded="true" style="display: none;"></div><div class="slide-background past" data-loaded="true" style="display: block;"></div><div class="slide-background stack past" data-loaded="true" style="display: block;"><div class="slide-background past" data-loaded="true" style="display: block;"></div><div class="slide-background present" data-loaded="true" style="display: block;"></div></div><div class="slide-background stack present" data-loaded="true" style="display: block;"><div class="slide-background past" data-loaded="true" style="display: block;"></div><div class="slide-background past" data-loaded="true" style="display: block;"></div><div class="slide-background present" data-loaded="true" style="display: block;"></div><div class="slide-background future" data-loaded="true" style="display: block;"></div><div class="slide-background future" data-loaded="true" style="display: block;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div></div><div class="slide-background stack future" data-loaded="true" style="display: block;"><div class="slide-background present" data-loaded="true" style="display: block;"></div><div class="slide-background future" data-loaded="true" style="display: block;"></div><div class="slide-background future" data-loaded="true" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div></div><div class="slide-background stack future" data-loaded="true" style="display: block;"><div class="slide-background present" data-loaded="true" style="display: block;"></div><div class="slide-background future" data-loaded="true" style="display: none;"></div><div class="slide-background future" data-loaded="true" style="display: none;"></div><div class="slide-background future" style="display: none;"></div></div><div class="slide-background stack future" data-loaded="true" style="display: none;"><div class="slide-background present" data-loaded="true" style="display: none;"></div><div class="slide-background future" data-loaded="true" style="display: none;"></div></div><div class="slide-background stack future" data-loaded="true" style="display: none;"><div class="slide-background present" data-loaded="true" style="display: none;"></div><div class="slide-background future" data-loaded="true" style="display: none;"></div></div><div class="slide-background stack future" data-loaded="true" style="display: none;"><div class="slide-background present" data-loaded="true" style="display: none;"></div><div class="slide-background future" data-loaded="true" style="display: none;"></div></div><div class="slide-background stack future" data-loaded="true" style="display: none;"><div class="slide-background present" data-loaded="true" style="display: none;"></div><div class="slide-background future" data-loaded="true" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div></div><div class="slide-background future" data-loaded="true" style="display: none;"></div></div><div class="progress" style="display: block;"><span style="width: 115.437px;"></span></div><aside class="controls" style="display: block;"><button class="navigate-left enabled" aria-label="previous slide"></button><button class="navigate-right enabled" aria-label="next slide"></button><button class="navigate-up enabled" aria-label="above slide"></button><button class="navigate-down enabled" aria-label="below slide"></button></aside><div class="slide-number" style="display: none;"></div><div class="speaker-notes" data-prevent-swipe=""></div><div class="pause-overlay"></div><div id="aria-status-div" aria-live="polite" aria-atomic="true" style="position: absolute; height: 1px; width: 1px; overflow: hidden; clip: rect(1px 1px 1px 1px);">1.内容区：内容区是CSS盒子模型的中心，它呈现了盒子的主要信息内容，这些内容可以是文本、图片等多种类型。内容区是盒子模型必备的组成部分，其他的3部分都是可选的。</div></div>
<script src="./葡萄藤PPT_files/head.min.js"></script>
<script src="./葡萄藤PPT_files/reveal.js"></script>
<script>
    // 以下为常见配置属性的默认值
    // {
    // 	controls: true, // 是否在右下角展示控制条
    // 	progress: true, // 是否显示演示的进度条
    // 	slideNumber: false, // 是否显示当前幻灯片的页数编号，也可以使用代码slideNumber: 'c / t' ，表示当前页/总页数。
    // 	history: false, // 是否将每个幻灯片改变加入到浏览器的历史记录中去
    // 	keyboard: true, // 是否启用键盘快捷键来导航
    // 	overview: true, // 是否启用幻灯片的概览模式，可使用"Esc"或"o"键来切换概览模式
    // 	center: true, // 是否将幻灯片垂直居中
    // 	touch: true, // 是否在触屏设备上启用触摸滑动切换
    // 	loop: false, // 是否循环演示
    // 	rtl: false, // 是否将演示的方向变成RTL，即从右往左
    // 	fragments: true, // 全局开启和关闭碎片。
    // 	autoSlide: 0, // 两个幻灯片之间自动切换的时间间隔（毫秒），当设置成 0 的时候则禁止自动切换，该值可以被幻灯片上的 ` data-autoslide` 属性覆盖
    // 	transition: 'default', // 切换过渡效果，有none/fade/slide/convex/concave/zoom
    // 	transitionSpeed: 'default', // 过渡速度，default/fast/slow
    // 	mouseWheel: true, //是否启用通过鼠标滚轮来切换幻灯片
    // }
    // 初始化幻灯片
    Reveal.initialize({
        history: true,
        dependencies: [
            {src: '../plugin/markdown/marked.js'},
            {src: '../plugin/markdown/markdown.js'},
            {src: '../plugin/notes/notes.js', async: true},
            {
                src: '../plugin/highlight/highlight.js', async: true, callback: function () {
                hljs.initHighlightingOnLoad();
            }
            }
        ]
    });
</script>


</body></html>